<template>
  <div id="app">
    <el-container>
      <el-aside width="230px">
        <div class="album-img-box">
          <div class="album-img" :class="{
            'album-flip0-90': isAlbumFlip0_90,
            'album-flip90-180': isAlbumFlip90_180,
            'album-flip180-90': isAlbumFlip180_90,
            'album-flip90-0': isAlbumFlip90_0}">
            <img :src="albumImgUrl"
                 :style="isPlaying ? albumRotateRunning : albumRotatePaused" alt=""/>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <el-row type="flex" justify="center">
            <el-col :span="3">
              <input id="top-search-box" type="text" v-model="searchedName" placeholder="搜索音乐"
                     @keyup.enter="searchMusic"
                     autocomplete="off"/>
            </el-col>
            <el-col :span="3">
              <button id="top-search-button" @click="searchMusic">搜索</button>
            </el-col>
            <el-col :span="3">
              <select id="top-sort-select" v-model="sorter" @change="searchMusic">
                <option value="NameSort">最佳匹配</option>
                <option value="ArtistSort">歌手名</option>
                <option value="">来源</option>
              </select>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-table :data="musicList" highlight-current-row @current-change="onCurrentChange" height="250"
                        style="width: 100%">
                <el-table-column prop="name" label="歌名" width="120"/>
                <el-table-column prop="artistName" label="歌手" width="120"/>
                <el-table-column prop="albumName" label="专辑" width="120"/>
                <el-table-column prop="sourceName" label="来源" width="120"/>
              </el-table>
            </el-col>
          </el-row>
        </el-main>
        <el-footer>
          <el-row type="flex" justify="center">
            <el-col :span="7">
              <audio ref="audio" controls autoplay loop :src="currentMusic ? currentMusic.mp3Url : ''"
                     @timeupdate="refreshLyric" @playing="onPlaying" @pause="onPause"></audio>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="7">
              <div id="lyric-line">
                {{ currentLyricLine }}
              </div>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';
// import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data() {
    return {
      searchedName: '',
      sorter: 'NameSort',
      musicList: [],
      currentMusic: null,
      currentLyricLine: '',
      isPlaying: false,

      albumImgUrl: require("@/assets/default-album-img.svg"),
      defaultAlbumImgUrl: require("@/assets/default-album-img.svg"),
      albumRotateRunning: {
        animation: "albumRotate 20s linear infinite running",
      },
      albumRotatePaused: {
        animation: "albumRotate 20s linear infinite paused",
      },
      isAlbumFlip0_90: false,
      isAlbumFlip90_180: false,

      isAlbumFlip180_90: false,
      isAlbumFlip90_0: false,
    }
  },
  methods: {
    searchMusic() {
      if (this.searchedName.trim() === '') {
        return;
      }
      const searchUrl = 'http://localhost:8080/icemusic/music/search?name=' + this.searchedName + '&sorter=' + this.sorter;
      axios.get(searchUrl)
          .then(response => {
            this.musicList = response.data.map((music, index) => {
              music.index = index;
              return music;
            })
          })
          .catch(err => {
            console.log(err)
          })
    },
    onCurrentChange(newMusic, oldMusic) {
      if (newMusic == null) {
        return;
      }
      // 更新当前音乐
      // 必须先更新歌词载清空歌词显示
      this.currentMusic = newMusic;
      if (newMusic.sourceName === '网易云音乐') {
        this.getCloudLyrics(newMusic.id);
      }
      this.currentLyricLine = '';
      // 更新歌单图片
      let albumImgUrl = this.defaultAlbumImgUrl;
      if (newMusic.imgUrl !== '') {
        // 有可用专辑图片时显示专辑图片
        albumImgUrl = newMusic.imgUrl;
      }
      if (oldMusic == null || newMusic.index > oldMusic.index) {
        // 翻转90°的 class 插入，专辑图片开始翻转90°，耗时0.5s
        this.isAlbumFlip0_90 = true;
        setTimeout(() => {
          // 翻转 90°后，去掉翻转 90°的class
          this.isAlbumFlip0_90 = false;
          // 在翻转到 90°这一瞬间，将专辑图片改成下一首的专辑图片
          this.albumImgUrl = albumImgUrl;
          // 接着从 90°翻转到180°,耗时0.5s
          this.isAlbumFlip90_180 = true;
        }, 500);
        setTimeout(() => {
          // 翻转动画由插入 class 完成，用完需去掉 class
          // 1s后翻转完成，去掉对应的 class
          this.isAlbumFlip90_180 = false;
        }, 1000);
      } else {
        // 反向翻转
        this.isAlbumFlip180_90 = true;
        setTimeout(() => {
          this.isAlbumFlip180_90 = false;
          this.albumImgUrl = albumImgUrl;
          this.isAlbumFlip90_0 = true;
        }, 500);
        setTimeout(() => {
          this.isAlbumFlip90_0 = false;
        }, 1000);
      }
    },
    getCloudLyrics(musicId) {
      const lyricUrl = 'http://localhost:8080/icemusic/music/lyric?sourceName=网易云音乐&musicId=' + musicId;
      axios.get(lyricUrl)
          .then(response => {
            // 必须先更新歌词载清空歌词显示
            this.currentMusic.lyrics = response.data;
            this.currentLyricLine = '';
          })
          .catch(err => {
            console.log(err);
          })
    },
    refreshLyric(event) {
      const lyrics = this.currentMusic.lyrics;
      if (lyrics == null) {
        return;
      }
      for (let i = 0; i < lyrics.length; i++) {
        if (event.target.currentTime < parseFloat(lyrics[i][0])) {
          if (i !== 0) {
            this.currentLyricLine = lyrics[i - 1][1];
          }
          return;
        } else {
          if (i === lyrics.length - 1) {
            this.currentLyricLine = lyrics[i][1];
            return;
          }
        }
      }
    },
    onPlaying() {
      this.isPlaying = true;
    },
    onPause() {
      this.isPlaying = false;
    }
  }
}
</script>

<style>
#top-search-box {
  margin-top: 20px;
}

#top-search-button {
  margin-top: 20px;
  margin-left: 40px;
}

#top-sort-select {
  margin-top: 20px;
  margin-left: 60px;
}

#lyric-line {
  margin-top: 10px;
  margin-left: 10px;
}

.album-img-box {
  margin-top: 30px;
  margin-left: 30px;
  perspective: 1000px; /* 翻转加点立体感 */
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.album-img {
  width: 180px;
  height: 180px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.album-img > img {
  width: 100%;
  height: 100%;
}

.album-flip0-90 {
  animation: albumFlip0_90 0.5s ease-in forwards;
}

.album-flip90-180 {
  animation: albumFlip90_180 0.5s ease-out forwards;
}

.album-flip180-90 {
  animation: albumFlip180_90 0.5s ease-in forwards;
}

.album-flip90-0 {
  animation: albumFlip90_0 0.5s ease-out forwards;
}

/* 专辑图片翻转从0°翻转到90° */
@keyframes albumFlip0_90 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(90deg);
  }
}

/* 专辑图片翻转从90°翻转到180° */
@keyframes albumFlip90_180 {
  from {
    transform: rotateY(-90deg);
  }
  to {
    transform: rotateY(0deg);
  }
}

/* 专辑图片翻转从0°翻转到90° */
@keyframes albumFlip180_90 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-90deg);
  }
}

/* 专辑图片翻转从90°翻转到180° */
@keyframes albumFlip90_0 {
  from {
    transform: rotateY(90deg);
  }
  to {
    transform: rotateY(0deg);
  }
}

/* 专辑图片旋转 */
@keyframes albumRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
